<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑导航 -->
        <!-- 分隔符：separator=">" -->
        <!-- 图标分割符 separator-class="el-icon-arrow-right" -->
        <!-- :replace="true" 等于true,跳转之后不能退回来了通过浏览器的返回按钮,false可以 -->
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/articles'}">内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 卡片主体部分 -->
      <!-- form表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!-- 时间 -->
        <!-- <div class="block">
          <p>组件值：{{ value }}</p>
          <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </div> -->

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 下部分卡片 -->
    <el-card class="table-card">
      <div slot="header" class="clearfix">根据筛选条件筛选出 条数据</div>
      <!-- 表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="封面">
            <template slot-scope="scope">
                <!-- {{scope.row  每一行数据}} -->
                <!-- {{scope.column}} -->
                <!-- {{scope.$index}}  每一行数据在数组中的下标 -->
                <div>{{scope.row.cover.images}}</div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            cover:{images:'tupian'}
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            cover:{images:'tupian'}
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            cover:{images:'tupian'}
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            cover:{images:'tupian'}
      }]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style lang="less" scoped>
.table-card {
  margin-top: 20px;
}
</style>